body
  background-color #eee
  font-family "Nunito"

/* Headings
-----------------------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
  font-weight 300

h1
  padding-bottom 16px
  border-bottom 2px solid rgba(0, 0, 0, 0.05)

h2
  border-bottom 0

/* Page
-----------------------------------------------------------------------------*/
@media (min-width 720px)
  .page
    padding-left 17.75rem

  .page-edit
    display none

  .page-nav
    padding 0

  .page-nav > .inner
    padding 0
    border-top none

/* Navbar
-----------------------------------------------------------------------------*/
.navbar
  z-index 500
  border-bottom none
  box-shadow 0 2px 4px 0 rgba(0, 0, 0, .05)

.navbar .logo
  width 165.37px

.nav-link, .repo-link
  font-weight 800

/* Sidebar
-----------------------------------------------------------------------------*/
#app
  .sidebar
    width 17.75rem
    border-right none
    background-color transparent
    background-image linear-gradient(0deg, #7e8ea1 0%, #3c4655 100%)

  .sidebar-heading
    padding 0 1.7rem
    margin-bottom: 0.5rem

  .sidebar-group:not(.first)
    margin-top: 0rem

  .sidebar-group:not(.collapsable) .sidebar-heading,
  .sidebar-heading
    text-transform uppercase
    letter-spacing 0.13rem
    font-size 12px
    font-weight 800
    color #C1CDDB

  a.sidebar-link
    color #fff
    border-left 0.125rem solid transparent

  a.sidebar-link:hover
    color #fff
    opacity 0.5
    border-left-color rgba(255, 255, 255, 0.7)

  a.sidebar-link:active
    color #fff
    opacity 0.7
    border-left-color rgba(255, 255, 255, 0.5)

  a.sidebar-link.active
    color #fff
    border-left-color rgba(255, 255, 255, 0.5)

  .sidebar-group a.sidebar-link
    padding-left 1.5rem

  @media (max-width 959px)
    .sidebar .nav-links
      border-bottom 2px solid rgba(255, 255, 255, 0.1)

  @media (max-width 719px)
    .nav-links a.nav-link, .nav-links a.repo-link
      color #fff

/* Sidebar ul, li, a, div spacing
-----------------------------------------------------------------------------*/
.sidebar-links
  > li
    margin 0
    margin-bottom: 2rem

/* Icons
-----------------------------------------------------------------------------*/
.icon.outbound
  display none

/* Content
-----------------------------------------------------------------------------*/
h1 .header-anchor,
h2 .header-anchor,
h3 .header-anchor,
h4 .header-anchor,
h5 .header-anchor,
h6 .header-anchor
  opacity 1
  color #bbb

h1 .header-anchor:hover,
h2 .header-anchor:hover,
h3 .header-anchor:hover,
h4 .header-anchor:hover,
h5 .header-anchor:hover,
h6 .header-anchor:hover
  text-decoration none !important

.content:not(.custom)
  padding 4rem 2.5rem 1rem

.content img {
  border-radius: 6px
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05)
}

.content img {
  zoom: 50%;
}

/* TOC
-----------------------------------------------------------------------------*/
.table-of-contents
  ul
    list-style none
    list-style-position outside

  > ul
    padding-left 0

    > li
      padding 0
      margin 0

  a:hover
    text-decoration none !important
    opacity 0.5

  a:active
    text-decoration none !important
    opacity 0.7

  a:before
    content '# '
    color #bbb
    margin-left -15px
    margin-right 3px

/* Prev/Next Links
-----------------------------------------------------------------------------*/
@require './override'

$tipColor = #A48CD3

.prev, .next
  color $accentColor

/* Custom Blocks
-----------------------------------------------------------------------------*/
.custom-block.tip
  background-color $tipColor

.custom-block.tip,
.custom-block.warning,
.custom-block.danger
  box-shadow 0 2px 4px 0 rgba(0, 0, 0, .05)
  border-left none
  border-radius 4px
  border 2px solid transparent

.custom-block.tip
  border-color darken($tipColor, 20%)

.custom-block.warning
  border-color darken(#F3ECC5, 30%)

.custom-block.danger
  border-color darken(#ffe6e6, 15%)

.custom-block-title
  color #fff

.custom-block.tip p, .custom-block.tip a
  color #fff

.custom-block.warning a,
.custom-block.danger a
  color currentColor

.custom-block a
  font-weight 800
  text-decoration underline

.custom-block code
  color #fff
  background-color rgba(0, 0, 0, 0.15)

/* Code Blocks
-----------------------------------------------------------------------------*/
div[class*="language-"]
  background-color white
  -webkit-font-smoothing subpixel-antialiased
  -moz-osx-font-smoothing subpixel-antialiased
  box-shadow 0 2px 4px 0 rgba(0, 0, 0, .05)

.content pre, .content pre[class*="language-"]
  line-height 1.7

.content pre code, .content pre[class*="language-"] code
  color #666

div[class~="language-php"]:before
  content "php"

div[class*="language-"]:before
  color: rgba(0, 0, 0, 0.3)

.token.selector, .token.important, .token.atrule, .token.keyword, .token.builtin
  color $accentColor

.token.property, .token.class-name, .token.constant, .token.symbol
  color $tipColor

.token.boolean, .token.number, .token.function
  color #666

.token.string, .token.char, .token.attr-value, .token.regex, .token.variable
  color $accentColor

.token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata
  color #bbb
